<template>
    <div class="colorComponent" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="section">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="标题设置" name="1">
                    <div class="setTitle">
                        <div class="item1">
                            <span class="title">文字颜色：</span>
                            <div class="right">
                                <el-color-picker v-model="titleFontColor" size="small" color-format="hex" :predefine="defaultPredefine" @change="pickerTitleFontColorChange"></el-color-picker>
                                <el-input v-model="titleFontColor16" size="small" minlength="6" maxlength="6" readonly>
                                    <template slot="prepend">#</template>
                                    <el-button slot="append" @click="resetTitleFontColorChange">重置</el-button>
                                </el-input>
                            </div>
                        </div>
                        <div class="item2">
                            <span class="title">背景颜色：</span>
                            <div class="right">
                                <el-color-picker v-model="titleBgColor" size="small" color-format="hex" :predefine="defaultPredefine" @change="pickerTitleBgColorChange"></el-color-picker>
                                <el-input v-model="titleBgColor16" size="small" minlength="6" maxlength="6" readonly>
                                    <template slot="prepend">#</template>
                                    <el-button slot="append" @click="resetTitleBgColorChange">重置</el-button>
                                </el-input>
                            </div>
                        </div>
                        <div class="item3">
                            <span class="title">背景图片：</span>
                            <div class="right">
                                <el-button class="chooseImg" v-if="titleBgImg == ''" @click="openChooseTitleBgImg">+</el-button>
                                <div class="imgBox" v-if="titleBgImg != ''">
                                    <img :src="titleBgImg" alt="" class="titleBgImg" />
                                    <a href="javascript:;" class="edit" @click="openEditTitleBgImg">替换</a>
                                    <a href="javascript:;" class="del el-icon-error" @click="delTitleBgImg"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="按钮设置" name="2">
                    <div class="setBtn">
                        <div class="item1">
                            <span class="title">文字颜色：</span>
                            <div class="right">
                                <el-color-picker v-model="btnFontColor" size="small" color-format="hex" :predefine="defaultPredefine" @change="pickerBtnFontColorChange"></el-color-picker>
                                <el-input v-model="btnFontColor16" size="small" minlength="6" maxlength="6" readonly>
                                    <template slot="prepend">#</template>
                                    <el-button slot="append" @click="resetBtnFontColorChange">重置</el-button>
                                </el-input>
                            </div>
                        </div>
                        <div class="item2">
                            <span class="title">背景颜色：</span>
                            <div class="right">
                                <el-color-picker v-model="btnBgColor" size="small" color-format="hex" :predefine="defaultPredefine" @change="pickerBtnBgColorChange"></el-color-picker>
                                <el-input v-model="btnBgColor16" size="small" minlength="6" maxlength="6" readonly>
                                    <template slot="prepend">#</template>
                                    <el-button slot="append" @click="resetBtnBgColorChange">重置</el-button>
                                </el-input>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="页面设置" name="3">
                    <div class="setPage">
                        <div class="item2">
                            <span class="title">背景颜色：</span>
                            <div class="right">
                                <el-color-picker v-model="pageBgColor" size="small" color-format="hex" :predefine="defaultPredefine" @change="pickerPageBgColorChange"></el-color-picker>
                                <el-input v-model="pageBgColor16" size="small" minlength="6" maxlength="6" readonly>
                                    <template slot="prepend">#</template>
                                    <el-button slot="append" @click="resetPageBgColorChange">重置</el-button>
                                </el-input>
                            </div>
                        </div>
                        <div class="item3">
                            <span class="title">文字颜色：</span>
                            <div class="right">
                                <el-color-picker v-model="pageFontColor" size="small" color-format="hex" :predefine="defaultPredefine" @change="pickerPageFontColorChange"></el-color-picker>
                                <el-input v-model="pageFontColor16" size="small" minlength="6" maxlength="6" readonly>
                                    <template slot="prepend">#</template>
                                    <el-button slot="append" @click="resetPageFontColorChange">重置</el-button>
                                </el-input>
                            </div>
                        </div>
                        <div class="item3">
                            <span class="title">背景图片：</span>
                            <div class="right">
                                <el-button class="chooseImg" v-if="pageBgImg == ''" @click="openChoosePageBgImg">+</el-button>
                                <div class="imgBox" v-if="pageBgImg != ''">
                                    <img :src="pageBgImg" alt="" class="pageBgImg" />
                                    <a href="javascript:;" class="edit" @click="openEditPageBgImg">替换</a>
                                    <a href="javascript:;" class="del el-icon-error" @click="delPageBgImg"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>

            <el-button type="primary" size="large" class="saveBtn" @click="saveComponentData">保 存</el-button>
        </div>
        <div class="colorItem">
            <div class="left">主题色示例：</div>
            <div class="right">
                <div class="page">
                    <div class="head" :style="{
              backgroundColor: titleBgColor,
              backgroundImage: titleBgImg?('url(\'' + titleBgImg + '\')'):'none',
            }">
                        <img :src="headBlack" alt class="headIcon" v-if="titleBgColor !== '#000000'" />
                        <img :src="headWhite" alt class="headIcon" v-if="titleBgColor == '#000000'" />
                        <div class="info">
                            <span class="back" :style="{ color: titleFontColor }"><i class="icon icon-back"></i>返回</span>
                            <p :style="{ color: titleFontColor }">这里是页面标题</p>
                            <img :src="headWhiteR" alt class="headRIcon" v-if="titleBgColor == '#000000'" />
                            <img :src="headBlackR" alt class="headRIcon" v-if="titleBgColor !== '#000000'" />
                        </div>
                    </div>
                    <div class="body" :style="{
              backgroundColor: pageBgColor,
              backgroundImage: pageBgImg?('url(\'' + pageBgImg + '\')'):'none',
            }">
                        <div class="search">
                            <div class="input">
                                <i class="el-icon-search"></i>
                            </div>
                        </div>
                        <div class="navSlider">
                            <div class="list">
                                <ul :style="{ width: nav.length * 70 + 'px' }">
                                    <li v-for="n in nav" :key="n.id">
                                        <img :src="n.img" alt="" />
                                        <span :style="{
                        color: pageFontColor,
                      }">{{ n.name }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="article">
                            <div class="aside">
                                <ul>
                                    <li v-for="a in aside" :key="a" :style="{
                      color: pageFontColor,
                    }">
                                        {{ a }}
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="swiper">
                                    <el-carousel height="100px">
                                        <el-carousel-item v-for="item in swiperImg" :key="item">
                                            <img :src="item" alt="" style="
                          width: 100%;
                          height: 100px;
                          display: block;
                          border-radius: 15px;
                        " />
                                        </el-carousel-item>
                                    </el-carousel>
                                </div>
                                <div class="product">
                                    <div class="con">
                                        <div class="item" v-for="item in product" :key="item.id">
                                            <img :src="item.img" alt="" />
                                            <div class="info">
                                                <p class="name">
                                                    {{ item.name }}
                                                </p>
                                                <div class="buy">
                                                    <div class="price">
                                                        <span>￥</span>{{ item.price }}
                                                    </div>
                                                    <button class="btn" :style="{
                              backgroundColor: btnBgColor,
                              color: btnFontColor,
                            }">
                                                        +
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ul class="foot">
                        <li>
                            <i class="iconfont icon-dianpu1"></i>
                            <span>首页</span>
                        </li>
                        <li>
                            <i class="iconfont icon-tubiaozujian"></i>
                            <span>分类</span>
                        </li>
                        <li>
                            <i class="iconfont icon-31gouwuche"></i>
                            <span>购物车</span>
                        </li>
                        <li>
                            <i class="iconfont icon-xianxinggeren"></i>
                            <span>我的</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <chooseImage></chooseImage>
    </div>
</template>
<script>
import headBlack from "@/assets/images/decorate/head_black.png";
import headBlackR from "@/assets/images/decorate/head_black_r.png";
import headWhite from "@/assets/images/decorate/head_white.png";
import headWhiteR from "@/assets/images/decorate/head_white_r.png";
import moula from "@/static/images/moula.jpg";
import ssshg from "@/static/images/ssshg.jpg";
import s1 from "@/static/images/s1.jpg";
import s2 from "@/static/images/s2.jpg";
import s3 from "@/static/images/s3.jpg";
import s4 from "@/static/images/s4.jpg";
import n1 from "@/static/images/n1.jpg";
import n2 from "@/static/images/n2.jpg";
import n3 from "@/static/images/n3.jpg";
import n4 from "@/static/images/n4.jpg";
import n5 from "@/static/images/n5.jpg";
import n6 from "@/static/images/n6.jpg";
import n7 from "@/static/images/n7.jpg";
import Bus from "@/utils/bus.js";
import { getToken } from "@/utils/auth";
import headApi from '@/utils/hade';
export default {
    name: "colorComponent",
    data() {
        return {
            pageName: "固定主题色页面",
            //保存了配置信息的页面id，不可删除！！
            pageId: 4,
            loading: false,
            headBlack,
            headBlackR,
            headWhite,
            headWhiteR,
            s1,
            s2,
            s3,
            s4,
            moula,
            ssshg,
            activeNames: ["1", "2", "3"],

            titleFontColor: "#000000",
            titleFontColor16: "000000",
            titleBgColor: "#F5F5F5",
            titleBgColor16: "F5F5F5",

            titleBgImg: "",

            btnFontColor: "#FFFFFF",
            btnFontColor16: "FFFFFF",
            btnBgColor: "#1890FF",
            btnBgColor16: "1890FF",

            pageBgColor: "#FFFFFF",
            pageBgColor16: "FFFFFF",

            pageFontColor: "#000000",
            pageFontColor16: "000000",

            pageBgImg: "",

            defaultPredefine: [
                "#ff4500",
                "#ff8c00",
                "#ffd700",
                "#90ee90",
                "#00ced1",
                "#1e90ff",
                "#c71585",
                "#FFFFFF",
                "#000000",
            ],

            swiperImg: [s1, s2, s3, s4],
            product: [
                {
                    id: 1,
                    name: "水果味起泡酒是由伏特加为基底，与新鲜果汁相混合的低酒精气泡酒，有蓝莓味、青柠味、蜜桃味等，口味多样、色彩丰富，既有酒的感觉，又有果汁的甘甜。",
                    img: moula,
                    price: 59,
                },
                {
                    id: 2,
                    name: "水果味起泡酒是由伏特加为基底，与新鲜果汁相混合的低酒精气泡酒，有蓝莓味、青柠味、蜜桃味等，口味多样、色彩丰富，既有酒的感觉，又有果汁的甘甜。",
                    img: moula,
                    price: 59,
                },
                {
                    id: 3,
                    name: "水果味起泡酒是由伏特加为基底，与新鲜果汁相混合的低酒精气泡酒，有蓝莓味、青柠味、蜜桃味等，口味多样、色彩丰富，既有酒的感觉，又有果汁的甘甜。",
                    img: moula,
                    price: 59,
                },
                {
                    id: 4,
                    name: "水果味起泡酒是由伏特加为基底，与新鲜果汁相混合的低酒精气泡酒，有蓝莓味、青柠味、蜜桃味等，口味多样、色彩丰富，既有酒的感觉，又有果汁的甘甜。",
                    img: moula,
                    price: 59,
                },
                {
                    id: 5,
                    name: "水果味起泡酒是由伏特加为基底，与新鲜果汁相混合的低酒精气泡酒，有蓝莓味、青柠味、蜜桃味等，口味多样、色彩丰富，既有酒的感觉，又有果汁的甘甜。",
                    img: moula,
                    price: 59,
                },
                {
                    id: 6,
                    name: "水果味起泡酒是由伏特加为基底，与新鲜果汁相混合的低酒精气泡酒，有蓝莓味、青柠味、蜜桃味等，口味多样、色彩丰富，既有酒的感觉，又有果汁的甘甜。",
                    img: moula,
                    price: 59,
                },
            ],
            nav: [
                { id: 1, name: "舒适生活", img: n1 },
                { id: 2, name: "舒适生活", img: n2 },
                { id: 3, name: "舒适生活", img: n3 },
                { id: 4, name: "舒适生活", img: n4 },
                { id: 5, name: "舒适生活", img: n5 },
                { id: 6, name: "舒适生活", img: n6 },
                { id: 7, name: "舒适生活", img: n7 },
            ],
            aside: [
                "手机数码",
                "电脑办公",
                "家用电器",
                "家装家居",
                "男装女装",
                "美妆护肤",
                "珠宝箱包",
                "房产汽车",
                "母婴玩具",
                "食品酒水",
                "鲜花礼品",
                "医药保健",
                "图书文娱",
                "酒店旅游",
                "理财保险",
            ],
        };
    },
    created() {},
    props: [],
    components: {
        chooseImage: () =>
            import("../../../components/vlonChooseImage/Index.vue"),
    },
    mounted() {
        this.$nextTick(() => {
            Bus.$on("chooseImageAftersetCommonTitleColor", (params) => {
                this.titleBgImg = params.url;
            });
            Bus.$on("chooseImageAftersetCommonPageColor", (params) => {
                this.pageBgImg = params.url;
            });
            this.getPageContentDetailsById();
        });
    },
    methods: {
        init() {
            this.getPageContentDetailsById();
        },
        handleChange() {},
        //通过ID获取配置页详细信息
        getPageContentDetailsById() {
            if (getToken()) {
                this.loading = true;
                // console.log(getToken());
                this.axios
                    .get(`${headApi}/appPageContent/${this.pageId}`, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        let { code, data, msg } = res.data;
                        if (code === 200) {
                            let item = JSON.parse(data.pageContent);
                            this.titleFontColor = item.titleFontColor;
                            this.titleBgColor = item.titleBgColor;
                            this.titleBgImg = item.titleBgImg;
                            this.btnFontColor = item.btnFontColor;
                            this.btnBgColor = item.btnBgColor;
                            this.pageBgColor = item.pageBgColor;
                            this.pageFontColor = item.pageFontColor;
                            this.pageBgImg = item.pageBgImg;
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        //选择完标题字体颜色
        pickerTitleFontColorChange() {
            if (this.titleFontColor) {
                this.titleFontColor16 = this.titleFontColor.substr(1);
            } else {
                this.titleFontColor16 = "";
            }
            if (
                this.titleFontColor === "#FFFFFF" &&
                this.titleBgColor === "#FFFFFF"
            ) {
                this.titleBgColor = "#000000";
            }
            if (
                this.titleFontColor === "#000000" &&
                this.titleBgColor === "#000000"
            ) {
                this.titleBgColor = "#FFFFFF";
            }
        },
        //重置标题字体颜色
        resetTitleFontColorChange() {
            this.titleFontColor = "#000000";
            this.titleFontColor16 = "000000";
        },

        //选择完标题背景颜色
        pickerTitleBgColorChange() {
            if (this.titleBgColor) {
                this.titleBgColor16 = this.titleBgColor.substr(1);
            } else {
                this.titleBgColor16 = "";
            }
            if (
                this.titleBgColor === "#FFFFFF" &&
                this.titleFontColor === "#FFFFFF"
            ) {
                this.titleFontColor = "#000000";
            }
            if (
                this.titleBgColor === "#000000" &&
                this.titleFontColor === "#000000"
            ) {
                this.titleFontColor = "#FFFFFF";
            }
        },
        //重置标题背景颜色
        resetTitleBgColorChange() {
            this.titleBgColor = "#F5F5F5";
            this.titleBgColor16 = "F5F5F5";
        },

        //选择标题背景图片
        openChooseTitleBgImg() {
            Bus.$emit("openChooseImgGroup", {
                ename: "chooseImage",
                controlid: "setCommonTitleColor",
            });
        },
        //编辑标题背景图片
        openEditTitleBgImg() {
            Bus.$emit("openChooseImgGroup", {
                ename: "chooseImage",
                controlid: "setCommonTitleColor",
            });
        },
        //删除标题背景图片
        delTitleBgImg() {
            this.titleBgImg = "";
        },

        //选择完按钮字体颜色
        pickerBtnFontColorChange() {
            if (this.btnFontColor) {
                this.btnFontColor16 = this.btnFontColor.substr(1);
            } else {
                this.btnFontColor16 = "";
            }
        },
        //重置按钮字体颜色
        resetBtnFontColorChange() {
            this.btnFontColor = "#" + this.btnFontColor16;
            this.btnFontColor = "#FFFFFF";
            this.btnFontColor16 = "FFFFFF";
        },
        //选择完按钮背景颜色
        pickerBtnBgColorChange() {
            if (this.btnBgColor) {
                this.btnBgColor16 = this.btnBgColor.substr(1);
            }
        },
        //重置按钮背景颜色
        resetBtnBgColorChange() {
            this.btnBgColor = "#1890FF";
            this.btnBgColor16 = "1890FF";
        },

        //选择完页面背景颜色
        pickerPageBgColorChange() {
            if (this.pageBgColor) {
                this.pageBgColor16 = this.pageBgColor.substr(1);
            }
        },
        //重置页面背景颜色
        resetPageBgColorChange() {
            this.pageBgColor = "#FFFFFF";
            this.pageBgColor16 = "FFFFFF";
        },

        //选择完页面文字颜色
        pickerPageFontColorChange() {
            if (this.pageFontColor) {
                this.pageFontColor16 = this.pageFontColor.substr(1);
            }
        },
        //重置页面文字颜色
        resetPageFontColorChange() {
            this.pageFontColor = "#000000";
            this.pageFontColor16 = "000000";
        },

        //选择页面背景图片
        openChoosePageBgImg() {
            Bus.$emit("openChooseImgGroup", {
                ename: "chooseImage",
                controlid: "setCommonPageColor",
            });
        },
        //编辑页面背景图片
        openEditPageBgImg() {
            Bus.$emit("openChooseImgGroup", {
                ename: "chooseImage",
                controlid: "setCommonPageColor",
            });
        },
        //删除页面背景图片
        delPageBgImg() {
            this.pageBgImg = "";
        },

        //保存组件数据
        saveComponentData() {
            if (!this.titleFontColor) {
                this.$message.warning("标题文字颜色不能为空");
                return false;
            }
            if (!this.btnFontColor) {
                this.$message.warning("按钮文字颜色不能为空");
                return false;
            }
            if (!this.pageFontColor) {
                this.$message.warning("页面文字颜色不能为空");
                return false;
            }
            let params = new Object();
            params.pageKey = "pageThemeColor"; //生成页面唯一key

            let pageContent = JSON.stringify({
                titleFontColor: this.titleFontColor,
                titleBgColor: this.titleBgColor,
                titleBgImg: this.titleBgImg,
                btnFontColor: this.btnFontColor,
                btnBgColor: this.btnBgColor,
                pageBgColor: this.pageBgColor,
                pageFontColor: this.pageFontColor,
                pageBgImg: this.pageBgImg,
            });
            params.pageContent = pageContent; //生成页面配置内容
            params.pageName = "固定主题色页面"; //页面名称
            params.pageType = 6; //0 自定义页面 1 个性化页面
            params.tenantId = Number(localStorage.getItem("tenantId"));
            if (this.pageId) {
                params.id = this.pageId;
                this.saveUpdate(params);
            } else {
                this.saveCreate(params);
            }
        },
        saveCreate(params) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .post(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
        saveUpdate(params) {
            if (getToken()) {
                this.loading = true;
                this.axios
                    .put(`${headApi}/appPageContent`, params, {
                        headers: { Authorization: "Bearer " + getToken() },
                    })
                    .then((res) => {
                        this.loading = false;
                        //console.log(res);
                        if (res && res.data) {
                            let { code, data, msg } = res.data;
                            if (code === 200) {
                                this.$message.success("保存成功");
                            } else {
                                if (msg) {
                                    this.$message.warning(msg);
                                } else {
                                    this.$message.error("接口请求失败");
                                }
                            }
                        } else {
                            this.$message.warning("接口请求失败");
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        console.log(err);
                    });
            }
        },
    },
    computed: {},
    watch: {},
};
</script>
<style scoped lang="scss">
.colorComponent {
    height: 100%;
    width: 100%;
    display: flex;
    .section {
        display: flex;
        width: 500px; height:100%; overflow-y: auto;
        position: relative;
        flex-direction: column;
        .el-collapse { height:700px;
            border: none;
            .setTitle,
            .setBtn,
            .setPage {
                width: 100%;
                flex-direction: column;
                display: flex;
                .item1,
                .item2,
                .item3 {
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    .title {
                        width: 70px;
                    }
                    .right {
                        display: flex;
                        align-items: center;
                        .el-color-picker {
                            width: 60px;
                        }

                        .chooseImg {
                            color: #1890ff;
                            font-size: 20px;
                            width: 40px;
                            height: 40px;
                            padding: 0;
                        }
                        .imgBox {
                            width: 40px;
                            height: 40px;
                            position: relative;
                            .titleBgImg,
                            .pageBgImg {
                                width: 40px;
                                height: 40px;
                            }
                            .edit {
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                z-index: -1;
                                opacity: 0;
                                width: 100%;
                                height: 20px;
                                background-color: rgba(0, 0, 0, 0.5);
                                color: #fff;
                                font-size: 12px;
                                display: flex;
                                justify-content: center;
                                align-content: center;
                                transition: all 0.3s;
                            }
                            .del {
                                position: absolute;
                                right: -15px;
                                top: -10px;
                                z-index: -1;
                                opacity: 0;
                                font-size: 18px;
                                width: 24px;
                                height: 24px;
                                display: flex;
                                justify-content: center;
                                color: #999;
                                align-content: center;
                                border-radius: 100%;
                                transition: all 0.3s;
                            }
                            &:hover {
                                .edit {
                                    z-index: 2;
                                    opacity: 1;
                                }
                                .del {
                                    z-index: 2;
                                    opacity: 1;
                                }
                            }
                        }
                        .el-input {
                            width: 200px;
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
        .saveBtn {
            width: 150px;
            position: relative;
            left: 70px;
            bottom: 0px;
            z-index: 2;
        }
    }
    .colorItem {
        width: 540px;
        display: flex;
        padding-top: 10px;
        box-sizing: border-box;
        .left {
            font-size: 12px;
            width: 90px;
        }
        .right {
            .page {
                width: 377px;
                /*height: 667px;*/
                height: 647px;
                background-color: #fff;
                display: flex;
                flex-direction: column;
                border: 1px solid #eee;
                box-shadow: 0px 4px 14px rgb(133 148 162 / 20%);
                .head {
                    display: flex;
                    flex-direction: column;
                    background-size: 100% 100%;
                    background-position: center center;
                    background-repeat: no-repeat;
                    .info {
                        display: flex;
                        height: 50px;
                        font-size: 12px;
                        align-items: center;
                        justify-content: space-between;
                        .back {
                            margin-left: 10px;
                            width: 70px;
                            i {
                                font-size: 12px;
                            }
                        }
                    }
                }
                .body {
                    width: 100%;
                    /* flex: 1 1 97%;
                    height:90%;*/
                    background-size: 100% 100%;
                    background-position: center center;
                    background-repeat: no-repeat;
                    overflow: hidden;
                    .search {
                        width: 100%;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .input {
                            width: 90%;
                            height: 30px;
                            border-radius: 30px;
                            background-color: #f5f5f5;
                            display: flex;
                            align-items: center;
                            padding-left: 10px;
                            box-sizing: border-box;
                            color: #ccc;
                        }
                    }
                    .navSlider {
                        width: 100%;
                        height: 65px;
                        user-select: none;
                        .list {
                            user-select: none;
                            overflow-x: auto;
                            width: 100%;
                            padding-bottom: 5px;
                            &::-webkit-scrollbar {
                                width: 0;
                                height: 5px;
                                background: transparent;
                                display: none;
                                transition: all 0.3s;
                            }
                            &::-webkit-scrollbar-track {
                                background-color: rgba(0, 121, 254, 0.2);
                                border-radius: 50px;
                            }

                            &::-webkit-scrollbar-thumb {
                                background-color: rgba(0, 121, 254, 0.3);
                                border-radius: 50px;
                            }

                            &::-webkit-scrollbar-thumb:hover {
                                background-color: rgba(0, 121, 254, 0.7);
                            }

                            &::-webkit-scrollbar-thumb:active {
                                background-color: rgba(0, 121, 254, 1);
                            }
                            &:hover {
                                &::-webkit-scrollbar {
                                    display: block;
                                    background: #ddd;
                                }
                            }
                        }

                        ul {
                            display: flex;
                            width: 420px;
                            user-select: none;
                            margin-left: 10px;
                            li {
                                display: flex;
                                width: 70px;
                                user-select: none;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                margin-right: 20px;
                                img {
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 100%;
                                    user-select: none;
                                }
                                span {
                                    font-size: 12px;
                                    color: #666;
                                    user-select: none;
                                }
                            }
                        }
                    }
                    .article {
                        width: 100%;
                        height: calc(100% - 115px);
                        
                        display: flex;
                        .aside {
                            width: 100px;
                            /*height: 430px;*/
                            height: 100%;
                            // background: #f5f5f5;
                            border-radius: 0 4px 0 0;
                            overflow-y: auto;
                            &::-webkit-scrollbar {
                                width: 5px;
                                height: 0px;
                                background: transparent;
                                display: none;
                                transition: all 0.3s;
                            }
                            &::-webkit-scrollbar-track {
                                background-color: rgba(0, 121, 254, 0.2);
                                border-radius: 50px;
                            }

                            &::-webkit-scrollbar-thumb {
                                background-color: rgba(0, 121, 254, 0.3);
                                border-radius: 50px;
                            }

                            &::-webkit-scrollbar-thumb:hover {
                                background-color: rgba(0, 121, 254, 0.7);
                            }

                            &::-webkit-scrollbar-thumb:active {
                                background-color: rgba(0, 121, 254, 1);
                            }
                            &:hover {
                                &::-webkit-scrollbar {
                                    display: block;
                                }
                                ul {
                                    position: relative;
                                    right: -2.5px;
                                }
                            }
                            ul {
                                li {
                                    font-size: 14px;
                                    color: #666;
                                    height: 40px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                }
                            }
                        }
                        .content {
                            width: calc(100% - 100px);
                            height: 100%;
                            padding-left: 10px;
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                        }
                        .swiper {
                            height: 100px;
                            user-select: none;
                            margin-right: 10px;
                        }
                        .product {
                            position: relative;
                            top: 15px;
                            height: calc(100% - 115px);
                            max-height: 315px;
                            overflow-y: auto;

                            &::-webkit-scrollbar {
                                width: 5px;
                                height: 0;
                                background: transparent;
                                display: none;
                                transition: all 0.3s;
                            }
                            &::-webkit-scrollbar-track {
                                background-color: rgba(0, 121, 254, 0.2);
                                border-radius: 50px;
                            }

                            &::-webkit-scrollbar-thumb {
                                background-color: rgba(0, 121, 254, 0.3);
                                border-radius: 50px;
                            }

                            &::-webkit-scrollbar-thumb:hover {
                                background-color: rgba(0, 121, 254, 0.7);
                            }

                            &::-webkit-scrollbar-thumb:active {
                                background-color: rgba(0, 121, 254, 1);
                            }
                            &:hover {
                                &::-webkit-scrollbar {
                                    display: block;
                                    background: #ddd;
                                }
                                .con {
                                    .item {
                                        width: calc(100% - 5px);
                                        .info {
                                            .buy {
                                                .btn {
                                                    right: 0px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            .con {
                                box-sizing: border-box;
                                position: relative;
                                right: 0px;
                                width: 100%;
                                .item {
                                    width: calc(100% - 10px);
                                    height: 80px;
                                    display: flex;
                                    background-color: #fff;
                                    margin-bottom: 15px;
                                    img {
                                        width: 80px;
                                        height: 80px;
                                        user-select: none;
                                        border-radius: 4px;
                                    }
                                    .info {
                                        width: calc(100% - 100px);
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        padding-left: 10px;
                                        position: relative;
                                        .name {
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            display: block;
                                            display: -webkit-box;
                                            position: absolute;
                                            top: 5px;
                                            left: 10px;
                                            width: 100%;
                                            font-size: 14px;
                                            -webkit-box-orient: vertical;
                                            -webkit-line-clamp: 2;
                                        }
                                        .buy {
                                            width: 100%;
                                            display: flex;
                                            position: absolute;
                                            left: 10px;
                                            bottom: 5px;
                                            justify-content: space-between;
                                            .price {
                                                color: red;
                                                user-select: none;
                                                font-size: 18px;
                                                span {
                                                    font-size: 12px;
                                                }
                                            }
                                            .btn {
                                                border: none;
                                                font-size: 18px;
                                                width: 22px;
                                                height: 22px;
                                                position: absolute;
                                                user-select: none;
                                                right: 0px;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                cursor: pointer;
                                                border-radius: 100%;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                .foot {
                    width: 100%;
                    user-select: none;
                    height: 50px;
                    border-top: 1px solid #eee;
                    box-sizing: border-box;
                    display: flex;
                    li {
                        width: 25%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        i {
                            font-size: 20px;
                            margin-bottom: 3px;
                            cursor: pointer;
                            color: #333;
                        }
                        span {
                            font-size: 12px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
.colorComponent {
    .el-collapse-item__header {
        font-weight: bold;
        width: 80px;
        border: none;
    }
    .el-color-picker__trigger {
        width: 60px;
        .el-color-picker__icon {
            display: none;
        }
    }
    .el-collapse-item__wrap {
        border: none;
    }
    .el-collapse-item__content{padding-bottom: 0;}
}
</style>
